<template>
	<div id="performanceManage" class="performanceManage">
		<div id="subtitle-userList" class="subtitle-userList">
			<tab>
				<tab-item @on-item-click="onItemClick">销售</tab-item>
				<tab-item @on-item-click="onItemClick">教师</tab-item>
			</tab>
		</div>

		<div>
			<scroller :on-refresh="refresh" :on-infinite="infinite" ref="performanceManageScroller">
				<group id="userList" class="userList">
					<cell class="userListCell" v-for="(item,index) in items" :title="item.nickname" @click.native="jumpTo(item.id)" @touchstart.native="showDeleteButton(index, item)" @touchend.native="clearLoop(item.id)">
						<img slot="icon" width="50" style="display:block;margin-right:5px;" src="../../../assets/profile/default_header.svg">
					</cell>
				</group>
			</scroller>
		</div>
	</div>

</template>

<script>
	import NetWorking from '../../../utils/networking'

	import Vue from 'vue'
	import { Group, Cell, ConfirmPlugin, Tab, TabItem} from 'vux'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	Vue.use(ConfirmPlugin)

	const SIZE = 20
  export default {
    name: "performanceManage-manage",
	  components: {
		  Group,
		  Cell,
		  Tab,
		  TabItem
	  },
	  data() {
		  return {
			  offset: 0,
			  limit: SIZE,
			  noMoreData: false,
			  items: []
		  }
	  },
	  created () {
		  let _this = this
		  _this.offset += 1;
		  NetWorking.doGet(
		  	'users/pages',
			  null,
			  {
			  	params: {
					  offset: _this.offset,
					  limit: _this.limit
				  }
			  }
		  ).then(
		  	response => {
				  let res = response.data
				  if (res.error_code == 0) {
					  _this.items = res.page_info.list
					  _this.top = 1
					  _this.bottom = res.page_info.list.length

					  if(res.page_info.list.length < _this.limit){
						  _this.noMoreData = true
					  }
				  } else {
					  alert(res.error_message)
				  }
			  }
		  )
	  },
	  methods: {
		  refresh(done) {
			  this.$refs.performanceManageScroller.finishPullToRefresh(true)
			  return
		  },
		  infinite(done) {
			  if(this.noMoreData){
				  this.$refs.performanceManageScroller.finishInfinite(true)
				  return
			  }else{
				  let _this = this
				  _this.offset += 1
				  NetWorking.doGet(
				  	'users/pages',
					  null,
					  {
					  	params: {
							  offset: _this.offset,
							  limit: _this.limit
						  }
					  }
				  ).then(
				  	response => {
				  		let rs = response.data
						  if (rs.error_code == 0) {
							  if (rs.page_info.list.length > 0) {
								  _this.items.push.apply(_this.items, rs.page_info.list)
								  _this.bottom += _this.items.length

								  if (rs.page_info.list.length < _this.limit) {
									  _this.noMoreData = true
									  _this.$refs.performanceManageScroller.finishInfinite(true);
									  return
								  }
							  } else {
								  //在没有更多数据的时候调用该函数，然后return，必须注意
								  _this.noMoreData = true
								  _this.$refs.performanceManageScroller.finishInfinite(true);
								  return
							  }
						  } else {
							  alert(rs.error_message)
						  }
					  }
				  )
				  done()
			  }
		  },
		  jumpTo: function (id) {
			  //组件间传递参数
			  this.$router.push({name: 'performanceSales', params: {id: id}})
		  },
		  showDeleteButton(index, user) {
			  var _this = this;
			  clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
			  this.Loop = setTimeout(function () {
				  let thisObj = this
				  thisObj.$vux.confirm.show({
					  title: '系统提示',
					  content: '确认要删除吗?',
					  onConfirm() {
						  NetWorking.doDelete(
							  'users',
							  null,
							  {
								  params: {
									  id: user.id
								  }
							  }
						  ).then(
							  response => {
								  let rs = response.data
								  if(rs.error_code == 0){
									  _this.items.splice(index, 1);
								  }else{
									  alert(rs.error_message);
								  }
							  }
						  )
					  }
				  })
			  }.bind(this), 1000);
		  },
		  clearLoop(id) {
			  clearInterval(this.Loop);
		  }
	  }
  }
</script>

<style>
	.userList {
		margin-top: 96px;
	}

	.subtitle-userList{
		margin-top: 46px;
		position: relative;
		z-index: 99;
	}
</style>